@import "../mixins/colors";
@import "../mixins/m-global";

$comment_height:1.6rem;
$header_height:4rem;
.m-ranking-list{
  position: fixed;
  top:0;
  width:100%;
  z-index: 20;
  padding:.2rem;
  background-color:rgba(0,0,0,.3);
}
.m-ranking_content-wrap{
  position: relative;
  background-color:rgba(255,255,255,.6);
  border-radius: .2rem;
  overflow:hidden;
  height:1.6rem;
}
.m-ranking_content{
  position: absolute;
  li{
    float: left;
  }
}
.m-ranking_content_comment{
  height:$comment_height;
  line-height: 1.5rem;
  font-size:12px;
  white-space: nowrap;
  padding:0 .5rem;
  span,img{
    display:inline-block;
    vertical-align: middle;
  }

}
.m-ranking_avatar{
  width:1.2rem;
  border-radius: 50%;
}
.m-ranking_name{
  margin:{
    left:1px;
    right:1px;
  }
  color:#ff6600;
  font-weight:600;
}
.m-ranking_gift{
  width:1.2rem;
}
.m-ranking_gift-name{
  width:auto;
}
.m-ranking_link-wrap{
  padding-left:.3rem;
}
.m-ranking_link{
  display:block;
  width:3.5rem;
  text-align: center;
  line-height: $comment_height;
  border-radius: .2rem;
  color:#fff;
  i{
    margin-right:.2rem;
  }
  span{
    display:inline-block;
    font-size: 12px;
  }
}
/*弹出层default状态*/
.weui-popup--default{
  $header_ht:3rem;
  .m-modal_header{
    height:$header_ht;
    line-height: $header_ht;
    vertical-align: middle;
    padding:{
      left:1rem;
      right:1.5rem;
    }
  }
  .m-modal_body{
    padding-top:$header_ht;
    background-color:#F8F8F8;
  }
  .m-modal_header_closed{
    top:50%;
    right:0;
    margin-top:-1.3rem;
    padding:.4rem .2rem .4rem .6rem
  }
  .g-overflow-wrap-y{
    background-color:transparent;
    padding-top:1rem;

  }
}
.m-modal_header_title{
  display:inline-block;
  font-size:.9rem;
}
.m-modal_footer{
  padding:1rem .5rem .5rem;
}
/*排行榜弹出层*/
.weui-popup--foot-bath{
  .weui-popup__modal{
    background-color:rgba(255,255,255,0);
    overflow: visible;
  }

}
.weui-popup--sm{
  //padding:1rem;
  .weui-popup__modal{
    width:90%;
    height:90%;
    min-height:15rem;
    @extend %transform--center;
    border-radius:.5rem 0 .5rem .5rem;
  }
  .weui-popup__overlay{
    opacity: 1;
  }
  .g-overflow-wrap-y{
    border-radius: 0 0 .5rem .5rem;
  }
}
.m-modal_header{
  position: relative;
  border-bottom:1px solid #E6E6E6;
  height:$header_height;
  z-index: 90;
}
.m-modal_header_closed{
  display:block;
  position: absolute;
  right:-.7rem;
  top:-.7rem;
  color:$color_orange_dark;
  width:2.6rem;
  height:2.6rem;
  padding:.2rem .2rem .6rem .6rem;
  line-height: 1;
  i{
    font-size:1.8rem;
  }
}
.m-modal_title--img{
  font-size:0;
  line-height: $header_height;
  img{
    width:100%;
    vertical-align: middle;
  }
}
.m-modal_body{
  position: absolute;
  padding-top: $header_height;
  height:100%;
  width:100%;
  top:0;
  left:0;
}
/*排行榜弹出层*/
.m-cells--ranking{
  .p-gift{
    top:.2rem;
  }
  .p-gift-img{
    width:1rem;
  }
  .p-gift-text{
    font-size:12px;
    color:#000;
    span{
      margin:0 .05rem;
    }
  }
}
.m-ranking-avatar{
  position: relative;
  width:3rem;
  height:3rem;
  margin:{
    left:.8rem;
    bottom:.3rem;
  }
  img{
    position: absolute;
    width:100%;

  }
  .m-avatar_top{
    z-index: 50;
    width:4.7rem;
    @extend %transform--center;
  }
  .m-avatar_top--draw{
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: -.4rem;
    bottom:-.2rem;
    z-index: 50;
  }
  .m-avatar_bottom{
    z-index: 49;
    border-radius: 50%;
    width:100%;
    height:100%;
  }
}
.m-ranking-num{
    display:inline-block;
    width:1.2rem;
    vertical-align: middle;
  text-align: center;
  font-size:1.2rem;
  color:$color_orange_dark;
}
.m-ranking_nickname{
  font-size: .8rem;
  color:#000;
  margin:{
    left:.5rem;
    top:-.2rem;
  }
}
.m-ranking-shop{
  position: absolute;
  bottom:.5rem;
  left:50%;
  width:15rem;
  margin-left:-7.5rem;
  height:3rem;
  border-radius:.2rem;
  box-shadow: .05rem .05rem .2rem .05rem rgba(0,0,0,.3);
  background:url("../images/img-global/background_paihangbang.png") center center no-repeat;
  text-align: center;
  color:#fff;
  h4,p{
    text-shadow: .05rem .05rem .1rem rgba(0,0,0,.3);
  }
}
.m-ranking-shop_name{
  font-weight:400;
  margin-top:.45rem;
}
.m-ranking-shop_address{
  font-size:14px;
}
.m-cells--ranking-popular{
  .weui-cell{
    padding-bottom:4.2rem;
  }
}
.m-ranking-first{
  display: inline-block;
  width: 1.2rem;
  vertical-align: middle;
  text-align: center;
  font-size: 1.2rem;
  color: #ff6600;
}
.m-ranking_total{
  position: absolute;
  top:3rem;
  right:.5rem;
  font-size:12px;
  color:#000;
  span{
    color:red;
    font-size:.8rem;
    margin:0 .1rem;
  }
}
.g-overflow-wrap-y{
  background-color:#fff;
  width:100%;
  overflow-x: hidden;
}
$height_modal_footer:8.5rem;
.weui-popup__modal--footer{
  .m-modal_body{
    padding-bottom: $height_modal_footer;
  }
  .g-overflow-wrap-y{
    border-bottom-left-radius: .01rem;
    border-bottom-right-radius: .01rem;
  }
  .m-modal_footer{
    position: absolute;
    bottom:0;
    height:$height_modal_footer;
    width:100%;
    background-color:rgba(255,255,255,.8);
    border-radius:0 0 .5rem .5rem;
    padding:.5rem;
  }
}
.m-textarea-group{
  background-color:#fff;
  padding:.2rem .5rem;
  margin-bottom:.5rem;
  textarea{
    color:$content_color;
    height:3rem;
  }
}
.weui-popup--foot-bath{
  .m-modal_header{
    background-image:linear-gradient(to top ,rgba(255,255,255,1) 0%,rgba(255,255,255,.8) 60%,rgba(255,255,255,.9) 100%);
    border-radius:.5rem 0 0;
  }
}
/*打赏弹出层*/

.p-footer--reward{
  $p-height_modal_footer:12rem;
  .m-modal_body{
    padding-bottom: $p-height_modal_footer;
  }
  .g-overflow-wrap-y{
    background-color:rgba(255,255,255,.9);
    padding:{
      left:.3rem;
      right:.3rem;
    }
  }
  .m-modal_footer{
    height:$p-height_modal_footer;
    background-color:#fff;
  }
}
.p-reward-input-group{
  margin-bottom:.5rem;
  font-size:.9rem;
  text-align: center;
  .p-reward-input{
    input{
      font-size:.9rem;
    }
    display:inline-block;
    width:6rem;
    height:2rem;
    padding:.2rem .5rem;
    vertical-align: middle;
    border:1px solid #E4E4E4;
    margin:{
      left:.1rem;
      right:.1rem;
    }
    border-radius: .25rem;
  }
  span{
    margin-right:.2rem;
    font-size:1rem;
  }
}
.p-reward-help-wrap{
  text-align: center;
  margin-bottom:.7rem;
  h4{
    font-size:1rem;
    font-weight:400;
  }
  p{
    color:$content_color;
    font-size:.8rem;
  }
}
.m-reward-list{
  $reward-item-wh:3.3rem;
  li{
    float: left;
    width:25%;
    text-align: center;
    padding:.5rem;
    &.active{
      .m-reward-item{
        border-color:$color_orange_dark;
      }
      .iconfont{
        $font-size:1.2rem;
        color:#FC4F4A;
        position: absolute;
        top:-.4rem;
        right:-.4rem;
        font-size: $font-size;
        line-height: 1;
        width:$font-size;
        height:$font-size;
        display:block;
        background-color:#fff;
        border-radius:50%;
      }
    }
  }
  .m-reward-item{
    position: relative;
    display:inline-block;
    width:$reward-item-wh;
    height:$reward-item-wh;
    text-align: center;
    border:1px solid #ccc;
    border-radius:.2rem;
    padding:.2rem 0;
    background-color:#fff;
    img{
      max-width:2.3rem;
      max-height:2.2rem;
      display:inline-block;
    }
    span{
      display:block;
      position: absolute;
      bottom:-.15rem;
      left:0;
      width:100%;
      text-shadow: 1px 1px 2px #fff;
    }
  }
}
.m-reward-item{
  &:active{
    background-color:#E5E5E5;
  }
}
/*抽奖*/
.p-modal-draw{
  .weui-popup__modal{
    background-color:transparent;
  }
  .weui-popup__overlay {
    opacity: 1;
  }
  .m-modal_header_closed{
    right:.5rem;
    top:.5rem;
    z-index: 90;
  }
}
/*私信*/
.m-list-num{
  position: absolute;
  font-size: .7rem;
  color:$color_orange_light;
  right:.5rem;
  top:.8rem;
}
.m-comment-time{
  font-size:.6rem;
  color:#B4B4B4;
  position: absolute;
  bottom:.7rem;
  right:.5rem;
}
.weui-panel--comment.weui-panel--comment--more{
  .weui-media-box{
    padding:{
      top:.8rem;
      bottom:2rem;
    }
  }
  .m-grade-wrap{
    bottom:.7rem;
  }
}